<template>
	<view>
		<view class="ask_top">
		</view>
		<view class="ask_digbu">
			<view class="ask_digbu_list" v-for="(item,index) in list" :key="index" :class="{checked1:index==k}" @click="qiedhuan(index,item)">
				{{item.title}}
			</view>
		</view>
		<view class="box_list ">
			<view class="box_get" v-for="(item,index) in dataList" :key="index">
				<image class="box_get_pic" :src="item.pic" mode=""></image>
				<view class="box_get_box">
					<view class="box_get_title diandiandian">
						{{item.title}}
					</view>
					<view class="box_get_for">
						<view class="box_get_for_title" v-for="(item,index) in item.renwu" :key="index">{{item}}
						</view>

					</view>
					<view class="box_get_for1">
						<view class="box_get_for1_box">
							<image src="/static/dating/shulaing.png" mode="" style="width: 25rpx;height: 25rpx;"></image>
							数量 {{item.number}}
						</view>
					<view class="box_get_for1_box">
						<image src="/static/dating/shulaing.png" mode="" style="width: 25rpx;height: 25rpx;"></image>
						剩余{{item.number}}
					</view>
					</view>
				</view>
				<view class="dingwei_price">
					<view class="dingwei_price_price">
					￥{{item.price}}
					</view>
					<view class="dingwei_price_box" @click="gorenwuxiangqing">
						领取
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '全部',
						id: '1'
					},
					{
						title: '默认排序',
						id: '2'
					},
					{
						title: '最新发布',
						id: '3'
					},
					{
						title: '最高佣金',
						id: '4'
					},
				],
				k: 0,
				dataList: [{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',

					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀",
							"王者荣耀",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',

					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',

					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',
					
					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',
					
					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',
					
					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',
					
					},
					{
						pic: '/static/index/index1.png',
						title: '任务任务任务任务任务',
						renwu: [
							"下载注册",
							"王者荣耀"
						],
						number: '1080',
						shengyu: '809',
						price: '6.8',
					
					},
					
				]
			}
		},
		methods: {
			onReachBottom: function() {
				var self = this;
				console.log(123)
			},
			gorenwuxiangqing(){
				uni.navigateTo({
					url:"../task_details/task_details"
				})
			},
			qiedhuan(index, item) {
				var self = this
				this.k = index; //this指向app
			},
		}
	}
</script>

<style lang="less">
	.ask_top {
		width: 750rpx;
		height: 20rpx;
		background-color: #EFEFF4;
	}

	.checked1 {
		border-bottom: 6rpx solid #7322D8;
		border-radius: 3rpx;
		box-sizing: border-box;
	}

	.ask_digbu {
		width: 750rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: 1rpx solid #EFEFF4;
		box-sizing: border-box;
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.ask_digbu_list {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.box_list {
		width: 750rpx;
		padding: 0 30rpx;
		.box_get {
			width: 750rpx;
			height: 190rpx;
			border-bottom: 1rpx solid #EFEFF4;
			padding: 30rpx 0 0 0;
			box-sizing: border-box;
			position: relative;
			display: flex;
			
			.dingwei_price_box{
				width:110rpx;
				height:46rpx;
				background:rgba(115,34,216,1);
				border-radius:25rpx;
				font-size:28rpx;
				text-align: center;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(240,240,240,1);
				line-height:46rpx ;
				margin-top: 10rpx;
			}
			.dingwei_price{
				position: absolute;
				right: 0;
				height: 150rpx;
				width: 200rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-top: 15rpx;
				.dingwei_price_price{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(255,59,48,1);
					
				}
			}
			.box_get_pic {
				width: 100rpx;
				height: 100rpx;
				margin-right: 25rpx;
				margin-top: 20rpx;
			}

			.box_get_box {
				width: 500rpx;
				height: 100%;
				.box_get_title {
					font-size: 30rpx;
					width: 500rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
				.box_get_for{
					display: flex;
					margin-top: 10rpx;
					.box_get_for_title{
						padding: 5rpx;
						background:rgba(115,34,216,1);
						opacity:0.5;
						border-radius:4px;
						font-size: 22rpx;
						color: white;
						margin-right: 10rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	.box_get_for1{
		display: flex;
		color: #8E8E8E;
		font-size: 26rpx;
		margin-top: 10rpx;
		.box_get_for1_box{
			display: flex;
			align-items: center;
			margin-right: 25rpx;
			image{
				margin-right: 8rpx;
			}
		}
	}
</style>
